<template>
  <div class="top_o">
    <el-card class="box-card" :style="{height:WindowHeight - cardHeight + 'px'}">
      <el-tabs v-model="activeName">
        <el-tab-pane label="本年费用计划" name="first">
          <el-table
            :data="tableData"
            style="width: 100%;"
            row-key="id"
            :max-height="WindowHeight - tabHeight"
            :expand-row-keys="expands"
            border
            stripe
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column prop="name" label="部门名称" width="260px" header-align="center" />
            <el-table-column prop="totalPrice" label="预算金额" header-align="center">
              <template slot-scope="scope">
                <div class="right">
                  <span v-text="scope.row.totalPrice" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="claimPrice" label="已报销金额" header-align="center">
              <template slot-scope="scope">
                <div class="right">
                  <span v-text="scope.row.claimPrice" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="remind" label="提醒比例" header-align="center">
              <template slot-scope="scope">
                <div class="right">
                  <span v-text="scope.row.remind" />
                  <!-- <span>元</span> -->
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="control" label="控制比例" header-align="center">
              <template slot-scope="scope">
                <div class="right">
                  <span v-text="scope.row.control" />
                  <!-- <span>元</span> -->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="费用计划审批" name="second">
          <el-table :max-height="WindowHeight - tabHeight" :data="tableData2" border stripe style="width: 100%;">
            <el-table-column fixed label="序号" type="index" width="70px" align="center" />
            <el-table-column prop="annual" label="年度" width="130px" align="center" />
            <el-table-column prop="section" label="部门" width="150px" align="center" />
            <el-table-column prop="amount" label="预算总额" width="200px" header-align="center">
              <template slot-scope="scope">
                <div class="right">
                  <span v-text="scope.row.amount" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="发起人" width="140px" align="center" />
            <el-table-column prop="date" align="center" label="发起日期" />
            <el-table-column prop="examine" label="审批状态" align="center" />
            <el-table-column label="操作" width="220" align="center">
              <el-button size="small" type="info" @click="feiYongJHShow">查看</el-button>
              <el-button size="small" type="success" @click="chulifeiYongJH">处理</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-button-group class="BtnAll">
        <el-button size="small" type="primary" @click="newfeiyongjh()">新增费用计划</el-button>
      </el-button-group>
    </el-card>
    <!-- 点来打开弹框 -->
    <component :is="configName" />
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      WindowHeight: document.body.clientHeight,
      configName: '',
      addPath: {
        configName: 'addfeiyongjh',
        configFilePath: 'rfcwgl/feiYongJH/append/feiYongJHAppend/index.vue'
      },
      showPath: {
        configName: 'showfeiyongjh',
        configFilePath: 'rfcwgl/feiYongJH/show/feiyongJHShow/index.vue'
      },
      editPath: {
        configName: 'editjiekuan',
        configFilePath: 'rfcwgl/components/chuLiYM/caiWuZJYM/index.vue'
      },
      cardHeight: 84,
      tabHeight: 180,
      annual: '',
      annual1: '',
      activeName: 'first',
      dialogVisible: false,
      lookchecked: false,
      // 要展开的行，数值的元素是row的key值
      expands: [],
      manage: false,
      tableData2: [
        {
          annual: 2017,
          amount: '200.121',
          examine: '部门审批',
          username: '张三',
          section: '技术部',
          reason: '团建',
          date: '2017-05-02',
          daipi: '待审批'
        },
        {
          annual: 2019,
          amount: '430.176',
          examine: '公司审批',
          username: '李四',
          section: '财务部',
          reason: '出差',
          date: '2019-05-02',
          daipi: '待审批'
        },
        {
          annual: 2020,
          amount: '230.176',
          examine: '结束',
          username: '王五',
          section: '市场部',
          reason: '年度总结',
          date: '2020-05-02',
          daipi: '待审批'
        }
      ],
      // 获取row的key值
      getRowKeys(row) {
        return row.id
      },

      tableData: [
        {
          id: 1,
          name: '技术部',
          totalPrice: '36.90',
          claimPrice: '96.36',
          remind: '',
          control: '',
          children: [
            {
              id: 11,
              name: '交通费',
              totalPrice: '12.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%'
            },
            {
              id: 12,
              name: '餐费',
              totalPrice: '12.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%'
            },
            {
              id: 13,
              name: '住宿费',
              totalPrice: '12.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%'
            }
          ]
        },
        {
          id: 2,
          name: '运营部',
          totalPrice: '36.90',
          claimPrice: '96.36',
          remind: '',
          control: '',
          children: [
            {
              id: 21,
              name: '交通费',
              totalPrice: '645.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%'
            },
            {
              id: 22,
              name: '会议费',
              totalPrice: '12.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%'
            },
            {
              id: 23,
              name: '餐费',
              totalPrice: '12.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%'
            }
          ]
        },
        {
          id: 3,
          name: '财务部',
          totalPrice: '36.90',
          claimPrice: '96.36',
          remind: '',
          control: '',
          children: [
            {
              id: 31,
              name: '会议费',
              totalPrice: '12.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%'
            },
            {
              id: 32,
              totalPrice: '12.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%',
              name: '餐费'
            },
            {
              id: 33,
              name: '交通费',
              totalPrice: '12.23',
              claimPrice: '32.12',
              remind: '21.32%',
              control: '30.25%'
            }
          ]
        }
      ]
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    },
    tagsView() {
      return this.$store.state.settings.tagsView
    }
  },
  watch: {
    windowHeight: function(old, newd) {
      this.WindowHeight = old
    },
    tagsView: function(old, newd) {
      this.ifTagsView(old)
    }
  },
  created() {
    this.ifTagsView(this.$store.state.settings.tagsView)
  },
  mounted() {
    // 在这里你想初始化的时候展开哪一行都可以了
    this.expands.push(this.tableData[0].id)
  },
  methods: {
    ifTagsView(data) {
      if (data) {
        this.cardHeight = 84
        this.tabHeight = 180
      } else {
        this.cardHeight = 50
        this.tabHeight = 155
      }
    },
    feiYongJHShow() {
      this.openWndow(this.showPath)
    },
    openWndow(e) {
      this.configName = Vue.component(e.configName, resolve => {
        require([`@/views/${e.configFilePath}`], resolve)
      })
    },
    chulifeiYongJH() {
      this.openWndow(this.editPath)
    },
    newfeiyongjh() {
      this.openWndow(this.addPath)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin: 0px;
}
</style>
